<template>
  <view class="page-wrapper jeepay-edit-form">
    <JeepayCustomNavbar bgDefaultColor="#fff" :title="qrcInfo.createdAt ? '修改码牌' : '绑定码牌'" backCtrl="back" />
    <uni-forms ref="qrcForm" :rules="rules" :model="qrcInfo" :label-width="120">
      <uni-forms-item required label="码牌编号" name="qrcId" v-if="!qrcInfo.createdAt">
        <view class="scan-wrapper">
          <uni-easyinput :inputBorder="false" type="number" v-model="qrcInfo.qrcId" placeholder="请输入码牌编号" />
          <image src="/pageDevice/static/devIconImg/icon-scan-code.svg" mode="scaleToFill" @tap="scanCode" />
        </view>
      </uni-forms-item>
      <uni-forms-item required label="码牌名称" name="qrcAlias">
        <uni-easyinput :inputBorder="false" type="text" v-model="qrcInfo.qrcAlias" placeholder="请输入码牌名称" />
      </uni-forms-item>
      <uni-forms-item required label="码牌金额">
        <JeepayRadioPopupView v-model:value="qrcInfo.fixedFlag" :list="moneyTye">
          <template #view="{ record }">
            <view class="selected-sex" style="color: #000">
              {{ record.label }}
              <image src="/pageDevice/static/devIconImg/icon-arrow-sex.svg" mode="scaleToFill" />
            </view>
          </template>
        </JeepayRadioPopupView>
      </uni-forms-item>
      <uni-forms-item required label="自定义金额" name="fixedPayAmount" v-if="qrcInfo.fixedFlag == 1">
        <view class="amount-input">￥ <uni-easyinput :inputBorder="false" type="digit" v-model="qrcInfo.fixedPayAmount" /></view>
      </uni-forms-item>
      <view class="code-line"></view>
      <uni-forms-item required label="绑定门店" name="storeId">
        <template #label>
          <view class="f-label">绑定门店</view>
        </template>
        <JeepayBizsPopupView :hasTitle="false" bizType="store" v-model:value="qrcInfo.storeId" :showName="qrcInfo.storeName" />
      </uni-forms-item>

      <view class="code-line"></view>
      <uni-forms-item required label="绑定应用" name="appId">
        <template #label>
          <view class="f-label">绑定应用</view>
        </template>
        <JeepayBizsPopupView :hasTitle="false" bizType="mchApp" v-model:value="qrcInfo.appId" :showName="qrcInfo.appName" />
      </uni-forms-item>
    </uni-forms>
    <view class="code-line"></view>
    <JSwitchCard title="状态" tips="状态禁用后，该码牌将不可使用">
      <template #right>
        <JSwitch :bol="qrcInfo.qrcState == 1" :confirmTips="false" @confirm="(val) => (qrcInfo.qrcState = val ? 1 : 0)" />
      </template>
    </JSwitchCard>
    <JSwitchCard title="支付宝支付方式" tips="支付宝支付方式">
      <template #right>
        <JeepayRadioPopupView v-model:value="qrcInfo.alipayWayCode" :list="aliTypeList">
          <template #view="{ record }">
            <view class="pay-type"> {{ record.label }}<image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" /> </view>
          </template>
        </JeepayRadioPopupView>
      </template>
    </JSwitchCard>
    <JSwitchCard title="页面类型" tips="谨慎选择，确认后不可变更" borderWidth="100vw" v-if="!qrcInfo.createdAt">
      <template #right>
        <JeepayRadioPopupView v-model:value="qrcInfo.entryPage" :list="pageTypeList">
          <template #view="{ record }">
            <view class="pay-type">{{ record.label }} <image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" /> </view>
          </template>
        </JeepayRadioPopupView>
      </template>
    </JSwitchCard>
    <view class="confirm-wrapper">
			<Button @tap="submitBindCodeData">{{ qrcInfo.createdAt ? '保存修改' : '确认绑定' }}</Button>
    </view>
  </view>

  <JSinglePopup :list="pageTypeList" ref="refPageType" confirm="selectedPageType" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reqLoad, API_URL_SYS_CODE_LIST, $bindEmptyQR, $parseQrCodeUrl } from '@/http/apiManager.js'
import formUtil from '@/commons/utils/formUtil.js'
import infoBox from '@/commons/utils/infoBox.js'
import emit from '@/commons/utils/emit.js'
import go from '@/commons/utils/go.js'
import cal from '@/commons/utils/cal.js'
onLoad((options) => {
  if (options.codeId) {
    return getDetails(options.codeId)
  }
  if (options.qrcId) return (qrcInfo.qrcId = options.qrcId)
})
const qrcInfo = reactive({
  qrcId: '',
  qrcState: 1,
  entryPage: 'default',
  alipayWayCode: 'ALI_JSAPI',
  fixedFlag: 0,
})

// 表单实例
const qrcForm = ref(null)
// 选择页面类型
const refPageType = ref(null)
// 页面类型
const pageTypeList = [
  { label: '未指定', value: 'default' },
  { label: '仅H5网页', value: 'h5' },
  { label: '仅小程序', value: 'lite' },
]
// 支付宝支付方式
const aliTypeList = [
  { label: 'ALI_JSAPI', value: 'ALI_JSAPI' },
  { label: 'ALI_WAP', value: 'ALI_WAP' },
]
// 是否固定金额
const moneyTye = [
  { label: '固定金额', value: 1 },
  { label: '任意金额', value: 0 },
]

const rules = {
  qrcAlias: {
    rules: [formUtil.rules.requiredInput('')],
  },
  qrcId: {
    rules: [formUtil.rules.requiredInput('')],
  },
  fixedPayAmount: {
    rules: [formUtil.rules.requiredInput('')],
  },
  storeId: {
    rules: [formUtil.rules.requiredSelect('门店')],
  },
  appId: {
    rules: [formUtil.rules.requiredSelect('应用')],
  },
}
const scanCode = () => {
  uni.scanCode({
    success: ({ result }) => {
      $parseQrCodeUrl(result).then(({ bizData }) => {
        qrcInfo.qrcId = bizData
      })
    },
    fail: (err) => {
      infoBox.showErrorToast('扫码失败')
    },
  })
}
const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
// 提交绑定码牌数据
const submitBindCodeData = () => {
  qrcForm.value.validate().then((res) => {
		if (qrcInfo.fixedFlag == 1 && !REG_AMOUNT.test(qrcInfo.fixedPayAmount)) {
			return infoBox.showToast('请输入正数 保留两位小数')
		}
    if (qrcInfo.createdAt) return saveQrcInfo()
    $bindEmptyQR(qrcInfo).then((res) => {
      infoBox.showSuccessToast('绑定成功')
      go.back(1, emit.ENAME_REF_TERMINAL_LIST)
    })
  })
}
// 保存修改后的数据
const saveQrcInfo = () => {
  reqLoad.addOrUpdate(qrcInfo.qrcId, API_URL_SYS_CODE_LIST, qrcInfo).then((res) => {
    emit.pageEmit(emit.ENAME_REF_TERMINAL_LIST)
    go.back(1, emit.ENAME_REF_QRC_DETAIL)
  })
}
const getDetails = (id) => {
  reqLoad.getById(API_URL_SYS_CODE_LIST, id).then(({ bizData }) => {
    bizData.fixedPayAmount = cal.cert2Dollar(bizData.fixedPayAmount)
    Object.assign(qrcInfo, bizData)
  })
}
</script>

<style lang="scss">
input {
  font-size: 32rpx;
}
.selected-sex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #b3b3b3;
  image {
    width: 120rpx;
    height: 120rpx;
  }
}
.confirm-wrapper {
  padding: 50rpx 30rpx;
  .confirm-button {
    height: 110rpx;
    color: #fff;
    border-radius: 20rpx;
    background: $jeepay-bg-primary;
  }
}
.pay-type {
  display: flex;
  align-items: center;
  color: #000;
  transform: translateX(40rpx);
  image {
    width: 108rpx;
    height: 42rpx;
  }
}
.scan-wrapper {
  display: flex;
  align-items: center;
  input {
    flex: 1;
  }
  image {
    width: 80rpx;
    height: 120rpx;
  }
}
.code-line {
  height: 20rpx;
  background-color: $v-color-bgrey;
}
.amount-input {
  display: flex;
  align-items: center;
}
</style>
